<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀官方网站-腾讯游戏</title>
    <link rel="stylesheet" href="./static/css/main.css">
    <link rel="stylesheet" href="./static/css/index.css">
</head>

<body>
    <!-- 导航栏 -->
    <nav class="top_nav">
        <!-- 腾讯推广 -->
        <div class="tg">
            <div class="ct">
                <img src="./static/images/logo_game.png" alt="">
                <img src="./static/images/hl.jpg" alt="">

                <div class="links">
                    <a href="#">成长守护平台</a>
                    <a href="#">腾讯游戏排行榜</a>
                </div>
            </div>
        </div>

        <!-- banner跳转 -->
        <div class="banner">
            <img src="./static/images/logo.png" alt="">
            <ul>
                <li>
                    <span>游戏资料</span>
                    <span>DATA</span>
                </li>
                <li>
                    <span>内容中心</span>
                    <span>CONTENTS</span>
                </li>
                <li>
                    <span>赛事中心</span>
                    <span>MATCH</span>
                </li>
                <li>
                    <span>百态王者</span>
                    <span>CULTURE</span>
                </li>
                <li>
                    <span>社区活动</span>
                    <span>COMMUNITY</span>
                </li>
                <li>
                    <span>玩家中心</span>
                    <span>PLAYER</span>
                </li>
                <li>
                    <span>IP新游</span>
                    <span>NEW GAMES</span>
                </li>
            </ul>
            <div class="login">
                <div class="icon"></div>
                <div class="info">
                    <span>欢迎登录</span>
                    <span>登录后查看战绩</span>
                </div>
            </div>
        </div>
    </nav>

     <!-- 固定宽度的容器，水平居中 -->
     <div class="container">
        <!-- 页面头部 -->
        <div class="header">
            <div class="carousel">
                <img src="./static/images/c1.jpg" alt="">
                <ul>
                    <li>海报票选结果</li>
                    <li>保C就该这么玩</li>
                    <li>大区决赛回顾</li>
                    <li>王者炸麦了</li>
                    <li>半决赛微电影</li>
                </ul>
            </div>

            <div class="news">
                <ul class="category">
                    <li>热门</li>
                    <li>新闻</li>
                    <li>公告</li>
                    <li>活动</li>
                    <li>赛事</li>
                    <li>...</li>
                </ul>
                <div class="content">
                    <a href="#" class="top">狄某有话说|辅助偷梁换柱</a>
                    <ul>
                        <li>
                            <a href="#">
                                <span>公告</span>
                                <span>5月26日净化游戏环境声明及处罚公告</span>
                                <span>05/26</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>公告</span>
                                <span>5月26日净化游戏环境声明及处罚公告</span>
                                <span>05/26</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>公告</span>
                                <span>5月26日净化游戏环境声明及处罚公告</span>
                                <span>05/26</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>公告</span>
                                <span>5月26日净化游戏环境声明及处罚公告</span>
                                <span>05/26</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>公告</span>
                                <span>5月26日净化游戏环境声明及处罚公告</span>
                                <span>05/26</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>公告</span>
                                <span>5月26日净化游戏环境声明及处罚公告</span>
                                <span>05/26</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>公告</span>
                                <span>5月26日净化游戏环境声明及处罚公告</span>
                                <span>05/26</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="actions">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>

        <!-- 推荐栏目 -->
        <div class="channels">
            <ul>
                <li>
                    <img src="./static/images/a1.jpg" alt="">
                </li>
                <li>
                    <img src="./static/images/a2.jpg" alt="">
                </li>
                <li>
                    <img src="./static/images/a3.png" alt="">
                </li>
                <li>
                    <img src="./static/images/a4.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
</body>
</html>